<template>
    <div class="template-box flex-row">
        <el-tree
                empty-text="暂无报表分类"
                class="tree"
                :props="defaultTreeProps"
                :data="treeData"
                @node-click="nodeClick">
        </el-tree>
        <article class="flex-col flex-item" v-if="query.reportCategoryCode">
            <header>
                <el-form inline>
                    <el-form-item>
                        <el-date-picker
                                style="width: 230px"
                                @change="getReportList"
                                v-model="query.time"
                                type="daterange"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </header>
            <main class="flex-col flex-item" style="min-height: 150px">
                <el-table border height="auto" class="flex-item" :data="tableData">
                    <el-table-column prop="name" label="名称"></el-table-column>
                    <el-table-column prop="reportCategoryCode" label="编码"></el-table-column>
                    <el-table-column prop="createTime" label="生成时间"></el-table-column>
                    <el-table-column prop="updateTime" label="更新时间"></el-table-column>
                    <el-table-column
                            prop="indexType"
                            label="类型">
                        <template slot-scope="{ row }">
                            <span>{{ searchByFiled(indexTypes, 'value', row.indexType).label }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="indexLang"
                            label="语言">
                        <template slot-scope="{ row }">
                            <span>{{ searchByFiled(indexLangOptions, 'value', row.indexLang).label }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作">
                        <template slot-scope="{ row, $index }">
                            <el-button type="text" @click="$router.push({ name: 'detail', params: { id: row.id } })" icon="el-icon-edit"></el-button>
                            <!--<el-button type="text" size="small" style="color: #F56C6C;"-->
                            <!--@click.stop="popover('deletePopover', { index: $index, data: row })">删除-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </main>
        </article>
        <!-- 首屏展示 -->
        <article class="first-screen flex-item" v-else>
            <el-card class="box-card" style="margin-bottom: 5px">
                <div slot="header" class="clearfix">
                    <span>昨日日报 2018-08-08</span>
                </div>
                <section class="file-list">
                    <el-card class="box-card">
                        <p class="file-list__title">布料作业日报布料作业日报布料作业日报</p>
                        <div>
                            <el-button type="text">上传</el-button>
                            <el-button type="text">下载</el-button>
                        </div>
                    </el-card>
                </section>
            </el-card>
        </article>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                treeData: [],
                tableData: [],
                defaultTreeProps: {
                    label: 'name',
                    children: 'childList'
                },
                indexTypes: [
                    { label: '小时', value: 'report_hour' },
                    { label: '4小时', value: '4hour_report' },
                    { label: '班报表', value: 'report_class' },
                    { label: '日报表', value: 'report_day' },
                    { label: '周表报', value: 'report_week' },
                    { label: '月表报', value: 'report_month' },
                    { label: '年表报', value: 'report_year' }
                ],
                indexLangOptions: [
                    { label: '中文', value: 'cn_zh' },
                    { label: '英文', value: 'en' },
                    { label: '中国台湾', value: 'cn_tw' },
                ],
                query: {
                    time: '',
                    reportCategoryCode: ''
                }
            };
        },
        methods: {
            downLoad(filePath) {
                window.open(`http://10.66.3.221:8181/report/reportIndex/download?path=${filePath}`);
            },
            /**
             * 子级数组被点击的事件
             */
            nodeClick(data) {
                if (!('code' in data)) return;
                this.query.reportCategoryCode = data.code;
                this.getReportList();
            },
            /**
             * 查询左边树节点
             */
            getTreeData() {
                this.$api
                    .request({
                        path: "report/list/allCategory",
                        method: "POST"
                    })
                    .then(({data}) => {
                        this.treeData = data;
                    })
            },
            getReportList() {
                const req = JSON.parse(JSON.stringify(this.query));
                if (this.time) {
                    req['startTime'] = this.time[0];
                    req['endTime'] = this.time[1];
                    delete req.time;
                }
                this.$api
                    .request({
                        path: "template/list",
                        data: req
                    })
                    .then(({data}) => {
                        this.tableData = data;
                    })
            },

            searchByFiled(arr, filedKey, filedVal, val) {
                if (Array.isArray(arr) && arr.length) {
                    let findEl = arr.find(item => item[filedKey] === filedVal);
                    if (findEl && Object.keys(findEl).length)
                        return val ? findEl[val.trim()] : findEl;
                }
                return val ? '' : {};
            },

            /**
             * 获取首屏数据
             */
            getFirstScreenData() {

            }
        },
        mounted() {
            this.getTreeData();
        }
    };
</script>
<style lang="scss">
    .template-box {
        width: 100%;
        .title {
            margin: 12px;
        }
        .el-select {
            width: 100%;
        }
    }

    .flex-col {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .flex-item {
            flex: auto;
        }
    }
    .flex-row {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        .flex-item {
            flex: auto;
        }
    }
    [class*='flex-'].center {
        align-items: center;
    }

    .tree {
        width: 200px;
        height: 100%;
        overflow-y: auto;
        flex-shrink: 0;
    }

    .template-box {
        height: calc(100vh - 80px);
        box-sizing: border-box;
    }
    .file-list {
        .el-card__body {
            padding: 10px;
            text-align: center;
        }
        .file-list__title {
            font-size: 14px;
            max-width: 150px;
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .box-card {
            display: inline-block;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
</style>